<template>
	<!-- <u-transition :show="show" mode="fade-up"> -->
	<view class="">
		<view class="fixed">
			<view class="m_tabbar ">
				<view class="flex1 " v-for="(item,i) in list.list" :key="i" @click="jump(item.pagePath)">
					<!-- v-if="i!=2" -->
					<view class="items">
						<view class="image " style="width: 42rpx;height:42rpx;">
							<image :src="path==item.pagePath?'/'+item.selectedIconPath:'/'+item.iconPath"
								mode='widthFix'></image>
						</view>
						<view class="text">
							<text :style="{color:path==item.pagePath?list.selectedColor:list. color}">{{item.text}}
							</text>
						</view>
					</view>
					<!-- <view class="items " v-else>
						<view class="items2" :class="{items3:path==item.pagePath}">
							<text style="width:48rpx;line-height:1.3;">{{item.text.substring(0,2)}} </text>
							<text style="width:48rpx;line-height:1.3;">{{item.text.substring(2,4)}} </text>
						</view>
					</view> -->
				</view>

			</view>
			<view class="zhanwei">
			</view>
		</view>
		<view class="zhanwei2">
		</view>
	</view>
	<!-- </u-transition> -->
</template>

<script>
	import {
		mapState,
		// mapActions
	} from 'pinia';
	import client from '/common/router/router.js'
	// import lawyer from '/common/router/router_lawyer.js'
	import useDataStore from "@/common/store/data.js"
	export default {
		name: "a-m-tabbar",
		props: ['path'],
		data() {
			return {
				show: false,
				list:client,
			};
		},
		watch: {
			// is_lawyer: {
			// 	handler: function(n) {
			// 		this.list = (n ? lawyer : client)
			// 	},
			// 	immediate: true,
			// }
		},
		computed: {
			...mapState(useDataStore, {
				is_lawyer: 'is_lawyer'
			}),
		},
		created() {
			uni.hideTabBar({
				complete(err) {}
			})
		},
		methods: {
			jump(path) {
				uni.switchTab({
					url: '/' + path,
					fail(err) {
						uni.reLaunch({
							url: '/' + path,
							fail(err) {
								console.log(err)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.fixed {
		/* #ifndef H5 */
		/* #endif */
		position: fixed;
		bottom: -100%;
		z-index: 999;
		left: 0;
		animation: show .3s ease-out 0.3s;
		-webkit-animation: show .3s ease-out .3s;
		animation-fill-mode: both
	}

	@keyframes show {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}

	@-webkit-keyframes show {
		from {
			bottom: -100px;
		}

		to {
			bottom: 0;
		}
	}

	.zhanwei2 {
		min-height: 110rpx;
		width: 100%;
		background-color: transparent;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.m_tabbar {
		min-height: 110rpx;
		display: flex;
		width: 750rpx;
		background: white;
		background-size: 750rpx 130rpx;
		background-position: 0 -20rpx;
		justify-content: space-between;

		.flex1 {
			flex: 1;
		}
	}

	.zhanwei {
		width: 100%;
		background-color: white;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.items {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;

		// margin: 20rpx auto 10rpx;
		.text {
			font-size: 28rpx;
		}

		margin-top: 10rpx;

		.image {
			image {
				display: block;
				width: 100%;
				height: 100%;

			}

			margin-bottom: 10rpx;
		}
	}

	.items2 {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-family: KaiTi;
		font-size: 24rpx;
		margin-top: -26rpx;
		letter-spacing: 0px;
		color: #ffffff;
		width: 94rpx;
		height: 94rpx;
		box-sizing: content-box;
		flex: 0 0 94rpx;
		text-align: center;
		border-radius: 50%;
		box-sizing: content-box;
		background-image: linear-gradient(4deg,
				#2c6959 0%,
				#12cccc 100%),
			linear-gradient(#2c6959,
				#2c6959);
		background-blend-mode: normal,
			normal;
		box-shadow: 0px -6rpx 20rpx 0px rgba(194, 194, 194, 0.3);
		border: solid 4rpx #ffffff;

	}

	.items3 {
		background-image: linear-gradient(4deg,
				#f5a804 0%,
				rgba(238, 170, 11, 0.5) 50%,
				#e6ab12 100%),
			linear-gradient(#f4ac0e,
				#f4ac0e);

		box-shadow: 0px -6rpx 20rpx 0px rgba(194, 194, 194, 0.3);
	}
</style>